import React from 'react';
import { Swiper } from 'antd-mobile';

import style from './index.module.css';

const MySwiper = (props) => {
  return (
    <div className={style.swiper}>
      <Swiper
        style={{ '--height': '100%' }}
        autoplay={true}
        loop={true}>
        <Swiper.Item key="1">
          <div
            style={{ backgroundColor: '#ace0ff', height: '100%' }}
            onClick={(evt) => {
              console.log('click', evt);
            }}>
            1
          </div>
        </Swiper.Item>
        <Swiper.Item key="2">
          <div
            style={{ backgroundColor: '#bcffbd', height: '100%' }}
            onClick={(evt) => {
              console.log('click', evt);
            }}>
            2
          </div>
        </Swiper.Item>
        <Swiper.Item key="3">
          <div
            style={{ backgroundColor: '#e4fabd', height: '100%' }}
            onClick={(evt) => {
              console.log('click', evt);
            }}>
            3
          </div>
        </Swiper.Item>
        <Swiper.Item key="4">
          <div
            style={{ backgroundColor: '#ffcfac', height: '100%' }}
            onClick={(evt) => {
              console.log('click', evt);
            }}>
            4
          </div>
        </Swiper.Item>
      </Swiper>
    </div>
  );
};

export default MySwiper;
